<%@ include file="/inc/common.inc"%>
<!DOCTYPE html>
<html>
  <head>
    <title>one.jsp</title>
	
    <meta name="keywords" content="keyword1,keyword2,keyword3">
    <meta name="description" content="this is my page">
    <meta name="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

  </head>
  
  <style type="text/css">
    body{max-width: 640px;margin: 0 auto;}
    #lunbo ul li{width:100%;list-style: none;width:640px; height:250px;background-color: #f00;text-align: center;}
    #lunbo ul li:not(:first-child){display: none;}
</style>

<body>
<div id="lunbo">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
</div>
<script type="text/javascript">
    //因为使用了document，所以js需要放在需要执行的代码下面生效才能生效
    var li=document.getElementById('lunbo').getElementsByTagName("li");
    var num=0;
    var len=li.length;

    setInterval(function(){
        li[num].style.display="none";
        num=++num==len?0:num;
        li[num].style.display="inline-block";

    },3000);//切换时间
</script>
</body>
</html>
